<template>
  <div style="box-shadow: 5px 5px 10px 0px  rgba(0, 0, 0, 0.2);">
    <br>
    <el-form :inline="true" :model="employeeserch" class="demo-form-inline">
    <el-form-item label="员工账号">
      <el-input v-model="employeeserch.account" placeholder="员工账号" clearable />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="employeeserch.nickname" placeholder="昵称" clearable />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="employeeserch.telephone" placeholder="手机号" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getPage">搜索</el-button>
      <el-button @click="add">添加员工</el-button>
    </el-form-item>
  </el-form>
  <el-divider />

  <el-table :data="employees" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="account" label="账号"  />
      <el-table-column prop="nickname" label="昵称"  />
      <el-table-column prop="telephone" label="手机号" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="is_del" label="状态" />
      <el-table-column  label="操作" >
        <template #default="scope">
          <el-button size="small"  @click="edit(scope.row)">
            修改
          </el-button>

          <el-button
            size="small"
            :type="scope.row.is_del == 0 ? 'primary' : 'danger'" 
            @click="updateStatus(scope.row)"
          >
          {{ scope.row.is_del==0?'启用':'禁用' }}
          </el-button>

        </template>
      </el-table-column>
    </el-table>
  <el-divider />


    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


  <el-dialog v-model="dialogFormVisible" :title="dTitle" width="500">
    <el-form :model="Employee">
      <el-form-item label="账号" >
        <el-input v-model="Employee.account" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" >
        <el-input v-model="Employee.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" >
        <el-input v-model="Employee.telephone" autocomplete="off" />
      </el-form-item>   
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <br>
  </div>

</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue';
import apiEmployee from '@/api/Employee.js';
import { ElMessage, ElMessageBox  } from 'element-plus';
const employeeserch = reactive({
  account: '',
  nickname: '',
  telephone: ''
});

const employees = ref([]);
const currentPage = ref(1);
const pageSize = ref(2);
const total = ref(0);
const dialogFormVisible = ref(false);
const dTitle = ref('');
const Employee= reactive({
});
const add = () => {
  Employee.account = '';
  Employee.nickname = '';
  Employee.telephone = '';
  dTitle.value = '添加员工';
  dialogFormVisible.value = true;
};
const edit = (row) => {
  Employee.account = row.account;
  Employee.nickname = row.nickname;
  Employee.telephone = row.telephone;
  Employee.id=row.id;
  dTitle.value = '编辑员工';
  dialogFormVisible.value = true;
};
const handleSizeChange = (val) => {
  console.log(val);
  pageSize.value = val;
  getPage(); 
};
const handleCurrentChange = (val) => {
  console.log(val);
  currentPage.value = val;
  getPage(); 
};

const getPage = () => {
  console.log(currentPage.value);
  const data = {
    page: currentPage.value,
    size: pageSize.value,
    account: employeeserch.account,
    nickname: employeeserch.nickname,
    phone: employeeserch.telephone,

  };
    apiEmployee.getEmployeeByPage(data)
    .then(response => {
        console.log(response.data);
        console.log(response.data.list);
        employees.value = response.data.list;
        total.value = response.data.totalCount;
        console.log(employees.value);
        console.log(total.value);
      
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
};
const onSubmit = () => {
  console.log(Employee);
  console.log(dTitle.value);
  if(dTitle.value=='添加员工'){
      apiEmployee.saveEmployee(Employee).then(response => {
      if (response.code === 200) {
        dialogFormVisible.value = false;
        ElMessage({
          message: '添加成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      }else{
        ElMessage({
         message: '添加出错',
          type: 'error',
        plain: true,
        })
      }
    })
  }else{

     apiEmployee.updateEmployee(Employee).then(response => {
      if (response.code === 200) {
        dialogFormVisible.value = false;
        ElMessage({
          message: '修改成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      }else{
        ElMessage({
          message: '修改出错',
          type: 'error',
        plain: true,
        })
      }
    })
  }

};
const updateStatus = (row) => {
  ElMessageBox.confirm(
    '确定要修改用户状态吗',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',     
      type: 'warning',
    }
  ).then(() => {
    apiEmployee.updateEmployeeStatus({
    id: row.id,
    is_del:row.is_del==0?1:0
  }).then(response => {
     
        ElMessage({
          message: '修改成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      
  })
  }).catch(() => {
    ElMessage({
      message: '取消修改',
      type: 'info',
      plain: true,
    })
  });
}
onBeforeMount(() => {
  getPage();
});

</script>

<style lang="css" scoped>
body{
  width: 100%;
  height: 100%;
}

</style>